<template>
  <div style="height:100%;width:100%;padding:0 80px 0 30px">
    <div class="top">
      <a href="javascipt:;" @click="goBack" style="font-size:14px">
        <i class="el-icon-arrow-left"></i>返回
      </a>
      <span v-if="isShow" style="padding:0 10px">|</span>
      <a href="javascipt:;" @click="goBackW" v-if="isShow" style="font-size:14px">
        <i class="el-icon-arrow-left"></i>返回课程
      </a>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%;height:100%:font-size:18px"
        height="100%"
        row-class-name="body-font"
        header-row-class-name="header-bg"
      >
        <el-table-column prop="className" label="班级名称" width="300" align="center"></el-table-column>
        <el-table-column prop="stuName" label="学生姓名" align="center"></el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSignIn == 1" style="color:#007CDC;font-size:14px">已签到</span>
            <el-button type="text" v-else style="color:#999" @click="sign(scope.row)">未签到</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { studentSignList, changeStudentSign } from "@/api/student";
import History from "@/util/history";
export default {
  name: "ManageTraineeAttendceStu",
  data() {
    return {
      query: {
        condition: "",
        pageIndex: 1,
        pageSize: 20,
        classId: ""
      },
      isShow: false,
      total: 0,
      tableData: []
    };
  },
  methods: {
    goBack() {
      this.$router.goBack();
    },
    goBackW() {
      this.$router.goBack();
      this.$router.goBack();
    },
    currentChange(page) {
      this.query.pageIndex = page;
      this.getStuSign();
    },
    sign(row) {
      changeStudentSign({ stuId: row.stuId, classId: this.query.classId })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: "签到成功",
              type: "success"
            });
            this.currentChange(1);
          }
        })
        .catch(res => {});
    },
    getStuSign() {
      studentSignList(this.query).then(res => {
        if (res.code == 1) {
          this.total = res.response.total;
          this.tableData = res.response.list;
        }
      });
    }
  },
  created() {
    this.query.classId = this.$route.params.id;
    this.getStuSign();
    if (History._history.length > 2) {
      if (
        History._history[History._history.length - 3].indexOf(
          "/train/detail/"
        ) != -1
      ) {
        this.isShow = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  padding: 25px 0;
}
.table {
  height: calc(100% - 150px);
  width: 100%;
  overflow: hidden;
}
.header-bg {
  background-color: #dee6ec !important;
  th {
    background-color: #dee6ec !important;
    color: #101010;
    font-weight: 400;
    font-size: 20px;
  }
}
.body-font {
  font-size: 18px;
}
.pager {
  height: 32px;
  box-sizing: content-box;
  padding: 20px 0;
  text-align: center;
}
</style>